<!-- <div class="container" style="margin-top: 150px">
    <div style="text-align:center;">
        <h2>web开发</h2>
    </div>
    <div style="margin: 10px 0px;width:100%;border:0.5px solid #666;"></div>
    <p>最早的软件都是运行在大型机上的，软件使用者通过“哑终端”登陆到大型机上去运行软件。后来随着PC机的兴起，软件开始主要运行在桌面上，而数据库这样的软件运行在服务器端，这种Client/Server模式简称CS架构。</p>
    <p>随着互联网的兴起，人们发现，CS架构不适合Web，最大的原因是Web应用程序的修改和升级非常迅速，而CS架构需要每个客户端逐个升级桌面App，因此，Browser/Server模式开始流行，简称BS架构。</p>
    <p>在BS架构下，客户端只需要浏览器，应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器，获取Web页面，并把Web页面展示给用户即可。</p>
    <p>当然，Web页面也具有极强的交互性。由于Web页面是用HTML编写的，而HTML具备超强的表现力，并且，服务器端升级后，客户端无需任何部署就可以使用到新的版本，因此，BS架构迅速流行起来</p>
    <p>今天，除了重量级的软件如Office，Photoshop等，大部分软件都以Web形式提供。比如，新浪提供的新闻、博客、微博等服务，均是Web应用。</p>
    <p>Web应用开发可以说是目前软件开发中最重要的部分。Web开发也经历了好几个阶段：</p>
    <ol>
        <li>
            <p>Web应用开发可以说是目前软件开发中最重要的部分。Web开发也经历了好几个阶段：</p>
        </li>
        <li>
            <p>CGI：由于静态Web页面无法与用户交互，比如用户填写了一个注册表单，静态Web页面就无法处理。要处理用户发送的动态数据，出现了Common Gateway Interface，简称CGI，用C/C++编写。
            </p>
        </li>
        <li>
            <p>ASP/JSP/PHP：由于Web应用特点是修改频繁，用C/C++这样的低级语言非常不适合Web开发，而脚本语言由于开发效率高，与HTML结合紧密，因此，迅速取代了CGI模式。ASP是微软推出的用VBScript脚本编程的Web开发技术，
                而JSP用Java来编写脚本，PHP本身则是开源的脚本语言。
            </p>
        </li>
        <li>
            <p>MVC：为了解决直接用脚本语言嵌入HTML导致的可维护性差的问题，Web应用也引入了Model-View-Controller的模式，来简化Web开发。ASP发展为ASP.Net，JSP和PHP也有一大堆MVC框架。
            </p>
        </li>
    </ol>
    <nz-divider nzText="前端开发" nzOrientation="left" style="font-size: 18px;"></nz-divider>
    <p>前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，
        早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
    <div style="display: flex">
        <div style="width: 5px;height: 20px;background: #4F9CEE;margin-top: 3px;"></div>
        <div style="font-size: 18px;margin-left: 5px;">核心技术</div>
    </div>
    <div class="title">HTML语言</div>
    <p class="content">HTML是一种标记语言，能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。</p>
    <div class="title">CSS</div>
    <p class="content">学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。</p>
    <div class="title">JavaScript</div>
    <p class="content">学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。</p>
    <div style="display: flex">
        <div style="width: 5px;height: 20px;background: #4F9CEE;margin-top: 3px;"></div>
        <div style="font-size: 18px;margin-left: 5px;">前端框架</div>
    </div>
    <p class="content">目前主流框架有： Vue.js、AngularJS（目前官网使用该框架开发）、React。</p>
</div> -->
<section class="intro-section">
    <div>
        <h1 class="intro-heading">{{title}}</h1>
        <div style="display: flex;justify-content: flex-end;">
            <div style="width:40px;border:1px solid #000;margin-bottom: 5px;"></div>
        </div>
        <div style="width:100%;border:1px solid #000;margin-top: 1px;"></div>
    </div>
</section>

<section class="content-section" data-scroll *ngFor="let item of data">
    <figure class="figure"><img [src]="'../../../../assets/images/' + item.img" /></figure>
    <div class="content">
        <header class="header">
            <div class="subheading">{{item.subheading}}</div>
            <h2 class="heading">{{item.heading}}</h2>
        </header>
        <p class="paragraph">
            <span  *ngFor="let contents of item.content">{{contents}}<br/><br/></span>
        </p>
    </div>
</section>